<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>佰木堂榻榻米|</title>
    <link rel="stylesheet" href="stylesheet/new_theme.css">
    <link rel="stylesheet" href="stylesheet/slick.css">
    <link rel="stylesheet" href="stylesheet/slick-theme.css">
    <script src="javascript/jquery.min.js"></script>
    <script src="javascript/main.js"></script>
</head>
<body>
<!--左侧导航-->
<div class="left_nemu">
    <ul>
        <li>
            <a href="#" val="work1" class="focus">亲王府</a>
        </li>
        <li>
            <a href="" val="work2">丞相府</a>
        </li>
        <li>
            <a href="" val="work3">将军府</a>
        </li>
        <li>
            <a href="" val="work4">国公府</a>
        </li>
        <li>
            <a href="" val="work5">翰林院</a>
        </li>
        <li>
            <a href="" val="work6">御史台</a>
        </li>
        <li>
            <a href="" val="work7">节度使</a>
        </li>
    </ul>
</div>
<!--左侧导航-->
<!--网页主体-->
<div class="page_con">
    <!--头部导航-->
    <header class="header">
        <div class="header_img">
            <img src="image/logo.png" class="left_img" alt="">
            <img src="image/logo-1.png" class="right_img" alt="">
        </div>
        <ul class="nume_list">
            <li>
                <a href="#">首页</a>
            </li>
            <li>
                <a href="#work">产品展示</a>
            </li>
            <li>
                <a href="#lxwm">关于我们</a>
            </li>
            <li>
                <a href="#jms">加盟商</a>
            </li>
            <li>
                <a href="#lxwm">联系我们</a>
            </li>
        </ul>
    </header>
    <!--头部导航-->
    <!--頁面展示-->
    <div class="page_show">
        <div class="page_home">
            <img src="image/page_1.jpg" alt="">
        </div>
        <div class='work_title' id="work">
            <img src="image/work_title.png" alt="">
        </div>
        <div class="work_1">
            <img src="image/work_1.png" alt="">
        </div>
        <div class="guodu_img"></div>
        <div class='work_title' id="jms">
            <img src="image/zhuanmaidian_img.png" alt="">
        </div>
        <div class="zmd_con">
            <img src="image/zmd_img_1.png" alt="" class="zmd_titles">
            <img src="image/left_btn.png" alt="" class="zmd_left_btn">
            <img src="image/right_btn.png" alt="" class="zmd_right_btn">
           <div style="width: 1090px;padding-left: 80px;padding-right: 80px">

                   <div class="regular slider piccon">
                       <div >
                           <a href="#" class="preview" rel="image/work_1.png">
                               <img src="image/z_work_1.png" alt="">
                           </a>
                       </div>
                       <div >
                           <a href="#" class="preview" rel="image/z_work_1.png">
                               <img src="image/z_work_1.png" alt="">
                           </a>
                       </div>
                       <div >
                           <a href="#" class="preview" rel="image/z_work_1.png">
                               <img src="image/z_work_1.png" alt="">
                           </a>
                       </div>
                       <div>
                           <a href="#" class="preview" rel="image/z_work_1.png">
                               <img src="image/z_work_1.png" alt="">
                           </a>
                       </div>

                   </div>
                   <!-- Add Pagination -->

           </div>
        </div>
        <div class="guodu_img"></div>
        <div class="footers" id="lxwm">
            <img src="image/footer_img.png" alt="">
            <div class="lx_con">
                <span>电话：186-6176-9040</span>
                <span>地址：山东省胶州市杜村工业区汇金通路7号—佰木堂榻榻米</span>
                <span>网址：http://www.baimutangttm.com</span>
            </div>
        </div>
    </div>
</div>
<!--网页主体-->
<script src="javascript/slick.js"></script>
<script>

    $(function () {
        $(".regular").slick({
            slidesToShow: 3,
            slidesToScroll: 1,
            autoplay: true,
            autoplaySpeed: 2000,
        });

        $('.left_nemu').on('click', 'a', function (e) {
            $('.left_nemu a').removeClass('focus');
            $(this).addClass('focus');
            e.preventDefault()
            var vals = $(this).attr('val');
            if (vals == 'work1') {
               $('.work_1').find('img').attr('src',"image/work_1.png");
            }
            if (vals == 'work2') {
                $('.work_1').find('img').attr('src',"image/work_2.png");
            }
            if (vals == 'work3') {
                $('.work_1').find('img').attr('src',"image/work_3.png");
            }
            if (vals == 'work4') {
                $('.work_1').find('img').attr('src',"image/work_4.png");
            }
            if (vals == 'work5') {
                $('.work_1').find('img').attr('src',"image/work_5.png");
            }
            if (vals == 'work6') {
                $('.work_1').find('img').attr('src',"image/work_6.png");
            }
            if (vals == 'work7') {
                $('.work_1').find('img').attr('src',"image/work_7.png");
            }
        })
    })

</script>
</body>
</html>